<!DOCTYPE html>
<html>
<head>
  <title>TaskTracker</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div id="login-panel">
    <div class="form-group">
      <label for="email">Email address</label>
      <input type="email" class="form-control" id="email" placeholder="Email, required">
    </div>
    <div class="form-group">
      <label for="password">Password (only be allowed to set for the first logon time)</label>
      <input type="password" class="form-control" id="password" placeholder="Password, no required">
    </div>
    
    <div id="login-err"></div>
    <button type="submit" class="submit button">Submit</button>
    
  </div>
  
  <div id="track-panel">
    <div class="form-group">
      Please select a task to track.
      <select id="tasks" class="form-control"></select>
    </div>
    <div class="form-group time-bar">
      <label id="startBtn" class="start"></label>
      <label class="time" id="hour">00</label>
      <label class="time">:</label>
			<label class="time" id="minute">00</label>
			<label class="time">:</label>
			<label class="time" id="second">00</label>
    </div>
    Please click to edit comment.
    <div id="comment">
      <pre id='view'></pre>
      <div id='editor'>
        <div class="btn-bar">
          <button id="savecomment">Save</button>
          <button id="cancelcomment">Cancel</button>
        </div>
        <textarea></textarea>
      </div>
    </div>
    <div id="service-url">
      Please click <button>Generate</button> to re-generate a service URL to view task.
      <a target="_blank" href="#"></a>
    </div>
    <div id="screenshot">
      <video></video>
      <canvas id="canvas1"></canvas>
    </div>
  </div>
  <script src="js/main.js"></script>
  <script src="js/capture.js"></script>
  <script src="js/timer.js"></script>
  <script src="js/request.js"></script>
  <script src="js/db.js"></script>
</body>
</html>
